{extend name="default:layout:base" /}

{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">
        <i class="fa fa-warning icon"></i>今日/昨日关键指标
    </div>
    <div class="layui-card-body">
        <div class="welcome-module">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-xs4">
                    <div class="panel layui-bg-number">
                        <div class="panel-body">
                            <div class="panel-title">
                                <h5>新关注人数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">
                                    <span class="today">{$today.subscribe}/{$yesterday.subscribe}</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="panel layui-bg-number">
                        <div class="panel-body">
                            <div class="panel-title">
                                <h5>取关人数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">
                                    <span class="today">{$today.unsubscribe}/{$yesterday.unsubscribe}</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="panel layui-bg-number">
                        <div class="panel-body">
                            <div class="panel-title">
                                <h5>累计关注人数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">
                                    <span class="today">{$today.total}/{$yesterday.total}</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>7天关键指标</div>
    <div class="layui-card-body">
        <div id="echarts-records" style="width: 100%; min-height: 500px;"></div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['echarts', 'element', 'miniTab'], function () {
        var $ = layui.jquery,
                miniTab = layui.miniTab,
                echarts = layui.echarts;

        miniTab.listen();
        var showChart = (params) => {
            //params.xData = ['周一','周二','周三','周四','周五','周六','周日'];
            //params.numData = [120, 132, 101, 134, 90, 230, 210];
            //params.moneyData = [220, 182, 191, 234, 290, 330, 310];
            var legends = params.legends;
            var series = [];

            params.series.forEach((item) => {
                series.push(Object.assign(item, {type:'line'}));
            });
            /**
             * 报表功能
             */
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
            var optionRecords = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legends
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: params.xData
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            echartsRecords.setOption(optionRecords);

            // echarts 窗口缩放自适应
            window.onresize = function(){
                echartsRecords.resize();
            };
        };

        var getData = (params = {}) => {
            requestPost("{:url('index')}", params, (res) => {
                showChart(res.data);
            });
        };

        getData();
    });
</script>
{/block}
{block name="css"}
<style>
    .layui-card-header{background-color: #f4f6f9;}
    .layui-card-body{text-align: center;font-size: 16px;color: #98999a;}
    .layui-card-body .no-margins{font-size: 24px;}
    .layui-card-body .today{font-size: 30px;color: #4c4c4c;}
    .panel-title{margin-bottom: 15px;}
</style>
{/block}